<template>
  <ul v-if="data.length">
      <todo-item 
          v-for="item of data" 
          :key="item.id" 
          :item="item"
          @toggle-completed="toggleCompleted"
          @remove-todo-item="removeTodoItem"
        ></todo-item>
 </ul>
  <p v-else>- 暂无数据 -</p>
</template>

<script>
import TodoItem from './TodoItem.vue'

export default {
  components: { TodoItem },
  name: 'Todos',
  props: ['data'],
  methods: {
    toggleCompleted(id) {
      this.$emit('toggleCompleted', id);
    },
    removeTodoItem(id) {
      this.$emit('removeTodoItem', id);
    }
  }
} 
  

</script>

<style>
ul {
  list-style: none;
}
</style>
